<template>
    <div id="SelectList" v-if="visible">
        <a-modal :title="title" :visible="visible" :class="['common-dialog', className]" :width="width" :footer="footer" @cancel="closeModel">
            <a-row :gutter="16" style="margin-bottom:10px" v-if="type!=='checker'" >
                <a-col class="gutter-row" :span="6" >
                    <a-input placeholder="输入名称或编号查询" v-model="searchProject.name" @pressEnter="getList" />
                </a-col>
                <a-col class="gutter-row" :span="6">
                    <a-button type="primary" @click="getList" >查询</a-button>
                </a-col>
            </a-row>
            <DataTable :scroll="{x: null}" :showConfig="false" :tableData="DataList" :tableColumn="column[type]" :pageConfig="pageConfig" />
        </a-modal>
    </div>
</template>

<script lang="ts">
/**
 * <SelectList type="pass" title="选择区域" :searchObj="searchObj" :visible="selectVisible" @confirmSelect="confirmSelect" @cancel="closeModel" width="70%" :footer="null" />
 * **/
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import util from '@/util/util'

@Component
export default class SelectList extends Vue {
    @Prop({type: Boolean, default: false }) visible!: any
    @Prop({ type: String, default: '' }) title!: string
    @Prop({ type: String, default: '' }) className!: string
    @Prop({ type: String, default: '520px' }) width!: string
    @Prop({ type: Array, default: () => [] }) footer!: any[]
    @Prop({ type: Object, default: () => ({}) }) searchObj!: any // 传值
    @Prop({ type: String, default: 'project' }) type!: string

    pageConfig: any = { current: 1, total: 10, pageSize: 10, onChange: this.changePage }
    DataList: any[] = [];
    searchProject:any = { name: '' }
    applySearch: any = ['applyInfo', 'applyList', 'approach', 'register', 'pass']
    apiList: any = {
        applyInfo: 'docInfoApplyInfoFetch', // 申请单--进场单引用
        applyList: 'docInfoApplyListFetch', // 申请单--变更单引用
        approach: 'docInfoApproachListFetch', // 变更单--出场单引用
        register: 'docInfoRegisterListFetch', // 登记单
        pass: 'docInfoPassListFetch', // 出场单
        area: 'docInfoAreaListFetch', // 分公司
        bank: 'docInfoBankListFetch', // 银行
        bankno: 'docInfoBanknoListFetch', // 银行账号
        dept: 'docInfoDeptListFetch', // 部门
        member: 'docInfoMemberListFetch', // 用户
        ogr: 'docInfoOrgListFetch', // 组织
        project: 'docInfoProjectListFetch', // 项目
        sgs: 'docInfoSgsListFetch', // 收购商档案
        wuliao: 'docInfoWuLiaoListFetch', // 物料
        checker: 'fjapproveCheckerListFetch' // 审批人
    }
    tableColumn: any = {
        applyInfo: {
            dealApplyHeadVO: { label: '编码', customRender: (text: any, record: any, index: any) => text.billcode },
            checkMemberName: { label: '项目', customRender: (text: any, record: any, index: any) => record.dealApplyHeadVO.projectName },
            registerName: { label: '申请人', customRender: (text: any, record: any, index: any) => record.dealApplyHeadVO.registerName },
            creatTime: { label: '申请时间', customRender: (text: any, record: any, index: any) => record.dealApplyHeadVO.creatTime }
        },
        applyList: {
            dealApplyHeadVO: { label: '编码', customRender: (text: any, record: any, index: any) => text.billcode },
            checkMemberName: { label: '项目', customRender: (text: any, record: any, index: any) => record.dealApplyHeadVO.projectName },
            registerName: { label: '申请人', customRender: (text: any, record: any, index: any) => record.dealApplyHeadVO.registerName },
            creatTime: { label: '申请时间', customRender: (text: any, record: any, index: any) => record.dealApplyHeadVO.creatTime }
        },
        approach: {
            approachHeadVO: { label: '编码', customRender: (text: any, record: any, index: any) => text.billcode },
            checkMemberName: { label: '项目', customRender: (text: any, record: any, index: any) => record.approachHeadVO.projectName },
            registerName: { label: '申请人', customRender: (text: any, record: any, index: any) => record.approachHeadVO.registerName },
            creatTime: { label: '申请时间', customRender: (text: any, record: any, index: any) => record.approachHeadVO.creatTime }
        },
        pass: {
            passHeadVO: { label: '编码', customRender: (text: any, record: any, index: any) => text.billcode },
            checkMemberName: { label: '项目', customRender: (text: any, record: any, index: any) => record.passHeadVO.projectName },
            registerName: { label: '申请人', customRender: (text: any, record: any, index: any) => record.passHeadVO.registerName },
            creatTime: { label: '申请时间', customRender: (text: any, record: any, index: any) => record.passHeadVO.creatTime }
        },
        register: { billcode: { label: '编码'}, projectName: { label: '项目'}, registerName: { label: '申请人'}, creatTime: { label: '申请时间'} },
        bank: { code: { label: '银行编码'}, name: { label: '名称'} },
        bankno: { code: { label: '编码'}, name: { label: '银行账号'} },
        dept: { deptCode: { label: '编码'}, deptName: { label: '部门名称'} },
        member: { memberAccount: { label: '账号'}, memberName: { label: '姓名'} },
        ogr: { code: { label: '组织编码', width: 200}, name: { label: '名称'} },
        area: { code: { label: '编码'}, name: { label: '名称'} },
        project: { ncProjectId: { label: '项目编码' }, ncProjectName: { label: '项目名称' } },
        sgs: { idCard: { label: '身份证'}, name: { label: '姓名'} },
        wuliao: { code: { label: '编码'}, name: { label: '名称'} },
        checker: { checkMemberId: { label: '用户编码' }, checkMemberName: { label: '用户名称' } }
    }


    get column () {
        const action = { label: '操作', width: 120, template: [{ tag: 'a', text: '确定', callback: this.confirm }] }
        this.tableColumn[this.type].action = action
        return this.tableColumn
    }
    @Watch('visible')
    watchVisible () {
        this.visible && this.$nextTick(() => {
            this.getList()
        })
    }
    init () {

    }
    confirm (val: any) {
        this.searchProject.name = ''
        this.$emit('confirmSelect', val, this.type)
    }
    closeModel () {
        this.searchProject.name = ''
        this.$emit('cancel', false)
    }
    changePage (val: number) {
        this.pageConfig.current = val;
        this.getList();
    }
  getList () {
    const searchValue = this.searchProject.name
    const type = this.type
    const flag = this.applySearch.includes(type)
    const { current, pageSize } = this.pageConfig
    const data: any = {
        ...this.searchObj,
        page: searchValue ? 1 : current,
        size: pageSize,
        searchValue,
        billCode: searchValue
    }
    this.$api[this.apiList[type]](data).then((res: any) => {
        const data = res.data
        if (type === 'checker' && data.length) {
            this.DataList = data
            this.pageConfig.total = data.length
        } else {
            this.DataList = data.records
            if (data.total) {
                this.pageConfig.total = data.total;
                this.pageConfig.current = data.current;
            }
        }
    }).catch()
  }
}
</script>

<style lang="scss">

</style>
